<template>
  <div class="hello">
    <header>
      <span><img src=".././assets/tuceng10.png" alt=""><router-link to="/Index">返回</router-link></span>
      <span>常用地址</span>
      <span class="btn">&nbsp;&nbsp;&nbsp;</span>
    </header><!-- /header -->
    <div class="slide">
      <span><img src=".././assets/clock.png" alt="">我的位置<img src=".././assets/xingzhuang.png" alt=""></span>
      <div class="hode"><span>深圳市政府</span>
        <span id="active">删除</span></div>
    </div>
    <div class="slide slider">
      <span><img src=".././assets/clock.png" alt="">我的位置<img src=".././assets/xingzhuang.png" alt=""></span>
      <div class="hode"><span>北京西站 -地铁站</span>
        <span id="active">删除</span></div>
    </div>
    <div class="slide slider">
      <span><img src=".././assets/clock.png" alt="">我的位置<img src=".././assets/xingzhuang.png" alt=""></span>
      <div class="hode"><span>颐和园-北宫门</span>
      <span id="active">删除</span></div>
    </div>
    <div class="slide slider">
      <span><img src=".././assets/clock.png" alt="">我的位置<img src=".././assets/xingzhuang.png" alt=""></span>
      <div class="hode"><span>北京站</span>
      <span id="active">删除</span></div>
    </div>
    <footer>
      <div>
        <router-link to="/home" class="laster">确定</router-link>
      </div>
    </footer>
    <div style="clear: both"></div>
    <div class="active2"></div>
    <div class="inner">
      <div class="bg">
        <p>确定删除当前地址</p>
      </div>
      <span class="first">
        <p><router-link to="/Index2" class="laster">确定</router-link></p>
      </span>
      <span class="last">
        <p><router-link to="/Index2" class="laster">删除</router-link></p>
      </span>
    </div>

  </div>
</template>

<script>

// $('.main span:first()').click(function(){
//   $('.active2,.inner').fadeIn('slow')
// });
// $('.bg img').click(function(){
//   $('.active2,.inner').fadeOut('slow')
// });
// $('.btn').click(function(){
//   $('.hode span.active').addClass('active')
// })
// var act = document.getElementById('active');
// act.onclick(function(){
// alert('dddd')
// })
export default {
  name: 'Index3',
  data () {
    return {
      msg: 'Welcome'
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.px2rem(@name, @px){
  @{name}: @px / 75 * 1rem;
}
body,html{
width:100%;
}
.txh{
  display: flex;
  display: -webkit-flex;
}
@color: red;
#app{
.btn{
color: @color;
}
.laster{
color: #fff;
}
width:100%;
header{
width:100%;
.txh();
justify-content: space-between;
align-items: center;
.px2rem(height,40);
.px2rem(margin-top,33);
// .px2rem(line-height,40);
span{
.txh();
align-items: center;
.px2rem(height,40);
}
span:first-child{
.px2rem(font-size,30);
color: #7b7b7b;
.px2rem(padding-left,30);
img{
.px2rem(width,18);
.px2rem(height,37);
.px2rem(margin-right,13);

}
}
span:nth-child(2){
.px2rem(font-size,40);
color: #454545;
.px2rem(margin-right,90);
}
}
.active2{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 5;


}
.inner{
    display: block;
    position: fixed;
    left:50%;
    margin-left:-32%;
    top:50%;
    margin-top:-33%;
    width: 64%;
    height: 40%;
    background: #5a5a5a;
    z-index: 8;
    color: #fff;
    .px2rem(font-size,40);
    // overflow-y: hidden;
    .px2rem(border-radius,18);
    .bg{
.txh();
justify-content: center;
.px2rem(margin-top,55);


    }
.first,.last{
  display: inline-block;
.px2rem(margin-top,108);
margin-left:25%;
}
.last{
margin-left:18%;
}
}

.slide{
  width: 100%;
.px2rem(margin-top,62);
.txh();
align-items: center;
span:first-child{
  width: 40%;
  color: #c2c2c2;
  font-size: 14px;
  .txh();
  align-items: center;
  .px2rem(height,40);
  img:first-child{
  .px2rem(margin-left,62);
  .px2rem(height,32);
  .px2rem(width,32);
  .px2rem(margin-right,28);
  }
  img:last-child{
   margin-left: 4%;
  .px2rem(margin-left,28);
  .px2rem(width,24);
  outline: none;
  border: none;
  border: 0;
  .px2rem(height,2);
  }
}
// .hode span#active{
// display: none;
// }
#map{
display:none;
}
.hode{
width: 60%;
.px2rem(height,40);
.txh();
justify-content: space-between;
align-items: center;
display: block;
.px2rem(height,40);
span{
display: block;
}
span:first-child{
.px2rem(width,300);
float: left;
color: #545454;
.px2rem(font-size,26);
}
span:last-child{
float: right;
.px2rem(font-size,26);
.px2rem(margin-right,28);
color: #ff0000;
}
}

}

.slider{
.px2rem(margin-top,82);
}
footer{
.px2rem(margin-top,82);
div{
.px2rem(margin-left,102);
.px2rem(height,75);
.px2rem(margin-right,106);
background: #653ed3;
color: #ffffff;
.px2rem(font-size,30);
text-align: center;
.px2rem(line-height,75);
border-radius: 30px;
.px2rem(margin-bottom,502);
a{
  color: #ffffff;
}
}
}


}
</style>
